@import "../../../styles/index";

.toggleinput__container {
  margin: 0 2px;
  position: relative;
  width: 24px;
  height: 16px;
  .cursor--pointer();
}

.toggleinput__track {
  .transition();

  background-color: var(--button);
  border-radius: 20px;
  width: 100%;
  height: 100%;
}

.toggleinput__handle {
  .transition();

  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  background-color: var(--white);
}

.toggleinput__container.active {
  .toggleinput__handle {
    transform: translateX(8px);
  }

  .toggleinput__track {
    background-color: var(--teal);
  }
}
